<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="单元格单独编辑"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
        :listTypeInfo="table.listTypeInfo"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="tsx">
import { reactive } from "vue"
// 保存
const save = (row: any) => {
  console.log("保存", row)
  const { labelInfoId, labelScanLogId, equipmentCode, weight } = row
  const obj = {
    labelInfoId,
    labelScanLogId,
    equipmentCode,
    weight
  }
  console.log("最终变化的数据", obj)

  table.columns.map((item: any) => {
    if (item.label == "生产设备") {
      item.canEdit = false
      item.prop = "equipmentName"  // 保存时使用equipmentName
    }
    if (item.label == "重量") {
      item.canEdit = false
    }
  })
  table.operator.map((val: any) => {
    if (val.text == "编辑") {
      val.bind.disabled = false
    }
  })
  row.isEdit = false
}
// 取消
const cancel = (row: any) => {
  row.isEdit = false
  table.operator.map((val: any) => {
    if (val.text == "编辑") {
      val.bind.disabled = false
    }
  })
  table.columns.map((item: any) => {
    if (item.label == "生产设备") {
      item.prop = "equipmentName"  // 取消时使用equipmentName
      item.canEdit = false
    }
    if (item.label == "重量") {
      item.canEdit = false
    }
  })
}
// 修改
const edit = (row: any) => {
  row.isEdit = true
  table.operator.map((val: any) => {
    if (val.text == "编辑") {
      val.bind.disabled = true
    }
  })
  table.columns.map((item: any) => {
    if (item.label == "重量") {
      item.canEdit = true
    }
    if (item.label == "生产设备") {
      item.prop = "equipmentCode"  // 编辑时使用equipmentCode
      item.canEdit = true
    }
  })
}
// 生产设备选择
const equipmentChange = ({ val, scope }: any) => {
  table.listTypeInfo.equipmentList.map((item: any) => {
    if (item.equipmentCode == val) {
      scope.row.equipmentName = item.equipmentName
      scope.row.equipmentCode = val
    }
  })
}

let table = reactive<TableTypes.Table>({
  // 接口返回数据
  data: [],
  columns: [
    { prop: "workOrderNo", label: "工单号", minWidth: "160" },
    { prop: "workStepName", label: "工序", minWidth: "100" },
    { prop: "materialName", label: "物料", minWidth: "140" },
    { prop: "materialSpecs", label: "规格", minWidth: "140" },
    { prop: "batchNo", label: "物料批次", minWidth: "180" },
    { prop: "labelCode", label: "包号", minWidth: "220" },
    {
      prop: "weight",
      label: "重量",
      minWidth: "180",
      canEdit: false,
      configEdit: {
        label: "重量",
        type: "input",
        editComponent: "el-input-number",
        event: "weight",
        bind: (scope: { row: { isEdit: any } }) => {
          return {
            controls: false,
            disabled: scope.row.isEdit ? false : true,
            min: 0,
            max: 9999,
            precision: 2
          }
        }
      }
    },
    {
      prop: "equipmentName",
      label: "生产设备",
      minWidth: "200",
      canEdit: false,
      configEdit: {
        label: "生产设备",
        type: "select-arr",
        editComponent: "el-select",
        list: "equipmentList",
        arrLabel: "equipmentName",
        arrKey: "equipmentCode",
        bind: (scope: { row: { isEdit: any } }) => {
          return {
            disabled: scope.row.isEdit ? false : true
          }
        },
        eventHandle: {
          change: (val: any) => equipmentChange(val)
        }
      }
    },
    {
      prop: "scanType",
      label: "工位类型",
      minWidth: "110",
      render: (text: any) => {
        let val = ""
        switch (text) {
          case 5:
            val = "上料工位"
            break
          case 6:
            val = "下料工位"
            break
        }
        return <span>{val}</span>
      }
    },
    { prop: "createBy", label: "操作人", minWidth: "120" },
    { prop: "team", label: "班组", minWidth: "100" },
    { prop: "createTime", label: "操作时间", minWidth: "160" },
    { prop: "updateBy", label: "修改人", minWidth: "120" },
    { prop: "updateTime", label: "修改时间", minWidth: "160" }
  ],
  listTypeInfo: {
    equipmentList: [
      {
        id: 77,
        equipmentGroupId: 12,
        equipmentCode: "0-A-jzescj-0005",
        equipmentName: "1#电捕",
        deptName: "石墨电极厂"
      },
      {
        id: 78,
        equipmentGroupId: 12,
        equipmentCode: "0-A-jzescj-0006",
        equipmentName: "2#电捕",
        deptName: "石墨电极厂"
      },
      {
        id: 79,
        equipmentGroupId: 12,
        equipmentCode: "0-A-jzescj-0007",
        equipmentName: "3#电捕",
        deptName: "石墨电极厂"
      }
    ]
  },
  operator: [
    {
      text: "编辑",
      bind: {
        disabled: false
      },
      show: { key: "isEdit", val: [false] },
      fun: edit
    },
    {
      text: "保存",
      fun: save,
      show: { key: "isEdit", val: [true] }
    },
    {
      text: "取消",
      fun: cancel,
      show: { key: "isEdit", val: [true] }
    }
  ],
  operatorConfig: {
    fixed: "right", // 固定列表右边（left则固定在左边）
    width: 160,
    label: "操作"
  }
})

let resData = [
  {
    workOrderNo: "20221214",
    workStepName: "粉碎",
    materialName: "针状焦",
    materialSpecs: "0-40nm",
    batchNo: "20221214-1214",
    labelCode: "20221214_FS_01",
    weight: 350.0,
    equipmentName: "1#电捕",
    scanType: 6,
    createBy: "负极材料员工",
    team: "甲班",
    createTime: "2022-12-14 15:44:50",
    updateBy: null,
    updateTime: null,
    equipmentCode: "0-A-jzescj-0005",
    labelInfoId: 338,
    labelScanLogId: 753,
    equipmentGroupId: 12,
    stepNum: 1,
    duty: "白班",
    workOrderStepId: 171,
    exceptionType: null
  },
  {
    workOrderNo: "20221214",
    workStepName: "粉碎",
    materialName: "负极材料",
    materialSpecs: "0-60nm",
    batchNo: "2022",
    labelCode: "2022_04",
    weight: 1.0,
    equipmentName: "2#电捕",
    scanType: 5,
    createBy: "负极材料员工",
    team: "甲班",
    createTime: "2022-12-14 15:42:26",
    updateBy: "陈文",
    updateTime: "2023-04-26 11:23:42",
    equipmentCode: "0-A-jzescj-0006",
    labelInfoId: 104,
    labelScanLogId: 752,
    equipmentGroupId: 12,
    stepNum: 1,
    duty: "白班",
    workOrderStepId: 171,
    exceptionType: null
  },
  {
    workOrderNo: "221024-02",
    workStepName: "粉碎1",
    materialName: "负极材料",
    materialSpecs: "0-60nm",
    batchNo: "S102402",
    labelCode: "S102402_01",
    weight: 50.0,
    equipmentName: "1#电捕",
    scanType: 5,
    createBy: "负极材料员工",
    team: "甲班",
    createTime: "2022-10-24 14:45:56",
    updateBy: null,
    updateTime: null,
    equipmentCode: "0-A-jzescj-0005",
    labelInfoId: 330,
    labelScanLogId: 742,
    equipmentGroupId: 10,
    stepNum: 1,
    duty: "白班",
    workOrderStepId: 169,
    exceptionType: null
  },
  {
    workOrderNo: "221024-01",
    workStepName: "粉碎1",
    materialName: "负极材料",
    materialSpecs: "0-60nm",
    batchNo: "S1024",
    labelCode: "S1024_01",
    weight: 50.0,
    equipmentName: "1#电捕",
    scanType: 5,
    createBy: "负极材料员工",
    team: "甲班",
    createTime: "2022-10-24 14:38:20",
    updateBy: null,
    updateTime: null,
    equipmentCode: "0-A-jzescj-0005",
    labelInfoId: 326,
    labelScanLogId: 739,
    equipmentGroupId: 10,
    stepNum: 1,
    duty: "白班",
    workOrderStepId: 167,
    exceptionType: null
  },
  {
    workOrderNo: "220816-01",
    workStepName: "整形",
    materialName: "针状焦",
    materialSpecs: "0-40nm",
    batchNo: "220816-01-0816",
    labelCode: "220816-01_FS_07",
    weight: 50.0,
    equipmentName: "3#电捕",
    scanType: 5,
    createBy: "负极材料员工",
    team: "乙班",
    createTime: "2022-09-02 15:25:13",
    updateBy: null,
    updateTime: null,
    equipmentCode: "0-A-jzescj-0007",
    labelInfoId: 319,
    labelScanLogId: 735,
    equipmentGroupId: 12,
    stepNum: 2,
    duty: "白班",
    workOrderStepId: 141,
    exceptionType: null
  }
]
resData.map((item: any) => {
  item.isEdit = false
})
table.data = resData
</script>
